<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>个人在线备忘录</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>
  <body>
    <div class="container">
      <header class="app-header">
        <h1>个人在线备忘录</h1>
        <p class="subtitle">记录每一个重要瞬间，随时掌控待办进度。</p>
      </header>

      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      <ul class="flash-list">
        {% for category, message in messages %}
        <li class="flash-item {{ category }}">{{ message }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      {% endwith %}

      <section class="new-todo-section">
        <form class="new-todo-form" action="{{ url_for('add_todo') }}" method="post">
          <label class="todo-label" for="title">添加事项</label>
          <div class="input-group">
            <input
              id="title"
              name="title"
              type="text"
              maxlength="100"
              placeholder="例如：每周例会 14:00"
              required
            />
            <button type="submit">添加</button>
          </div>
        </form>
      </section>

      <section class="todo-list-section">
        {% if todos %}
        <ul class="todo-list">
          {% for todo in todos %}
          <li class="todo-item {% if todo['completed'] %}completed{% endif %}">
            <div class="todo-display">
              <form
                class="toggle-form"
                action="{{ url_for('toggle_todo', todo_id=todo['id']) }}"
                method="post"
              >
                <input
                  type="checkbox"
                  name="completed"
                  {% if todo['completed'] %}checked{% endif %}
                  onchange="this.form.submit()"
                />
                <noscript>
                  <button type="submit">更新</button>
                </noscript>
              </form>
              <div class="todo-details">
                <span class="todo-title">{{ todo['title'] }}</span>
                <time class="todo-time">{{ todo['created_at'] }}</time>
              </div>
              <div class="todo-actions">
                <button
                  type="button"
                  class="edit-trigger"
                  data-target="edit-{{ todo['id'] }}"
                >
                  编辑
                </button>
                <form
                  class="delete-form"
                  action="{{ url_for('delete_todo', todo_id=todo['id']) }}"
                  method="post"
                  onsubmit="return confirm('确定要删除该事项吗？');"
                >
                  <button type="submit" class="danger">删除</button>
                </form>
              </div>
            </div>

            <form
              id="edit-{{ todo['id'] }}"
              class="edit-form"
              action="{{ url_for('edit_todo', todo_id=todo['id']) }}"
              method="post"
            >
              <input
                type="text"
                name="title"
                maxlength="100"
                value="{{ todo['title'] }}"
                required
              />
              <div class="edit-form-actions">
                <button type="submit">保存</button>
                <button type="button" class="cancel-edit">取消</button>
              </div>
            </form>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <p class="empty-state">暂无事项，开始添加你的第一个任务吧！</p>
        {% endif %}
      </section>
    </div>

    <script>
      const editButtons = document.querySelectorAll(".edit-trigger");
      const cancelButtons = document.querySelectorAll(".cancel-edit");

      editButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const formId = button.getAttribute("data-target");
          const form = document.getElementById(formId);
          if (!form) return;
          form.classList.toggle("visible");
          if (form.classList.contains("visible")) {
            const input = form.querySelector('input[name="title"]');
            if (input) {
              input.focus();
              input.select();
            }
          }
        });
      });

      cancelButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const form = button.closest(".edit-form");
          if (form) {
            form.classList.remove("visible");
          }
        });
      });
    </script>
  </body>
</html>
